<template>
  <!-- 头部导航栏组件 -->
  <div class="headerNav" :class="[isfixed?'scroll':'']">
    <div class="container">
      <a class="logo">
        <img src="@/assets/logo100.jpg" />
      </a>
      <ul class="page">
        <li>
          <router-link to="/" :class="[$route.path === '/'? 'active':'']">首页</router-link>
        </li>
        <li>
          <router-link to="/wish" :class="[$route.path === '/wish'? 'active':'']">心愿墙</router-link>
        </li>
        <li>
          <router-link to="/blessing" :class="[$route.path === '/blessing'? 'active':'']">祝福墙</router-link>
        </li>
        <li>
          <router-link
            to="/confessionWall"
            :class="[$route.path === '/confessionWall'? 'active':'']"
          >表白墙</router-link>
        </li>
      </ul>
      <div class="serach">
        <input placeholder="支持用户昵称，墙的文章id" @keyup.enter="toSearch" v-model="keyword" />
        <button>
          <a @click="toSearch">
            <i class="iconfont icon-sousuo"></i> 寻找
          </a>
        </button>
      </div>
      <ul class="info" v-if="!isShow">
        <li>
          <!-- <a>登录</a> -->
          <router-link to="/login" :class="[$route.path === '/login'? 'active':'']">登录</router-link>
        </li>
        <li>
          <router-link to="/register" :class="[$route.path === '/register'? 'active':'']">注册</router-link>
        </li>
        <li>
          <a class="headimg" title="未登录">
            <i class="iconfont icon-weidenglu"></i>
          </a>
        </li>
      </ul>
      <ul class="info" v-else>
        <li>
          <a @click="toMine" :class="[$route.name === '/mine'? 'active':'']">我的</a>
        </li>
        <li>
          <a title="为了账号安全，公用地方登录请退出" @click="quit">退出</a>
        </li>
        <li>
          <a class="headimg" title="你的头像">
            <!-- 拿到vuex个人信息中的头像  这里设计用户如果没有图片则不显示-->
            <img v-if="!userinfo.user_pic" />
            <img :src="userinfo.user_pic" v-else />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderNav",
  data() {
    return {
      // 控制登录和未登录
      isShow: localStorage.getItem("WALLTOKEN"),
      isfixed: false, //控制头部是否需要固定定位
      keyword: "", //搜索关键字
    };
  },
  mounted() {
    // 登录的全局事件总线回调
    this.$bus.$on("isLogin", () => {
      this.isShow = localStorage.getItem("WALLTOKEN");
    });
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 退出账号的回调
    quit() {
      // 删除token和loginfrom
      try {
        localStorage.removeItem("WALLTOKEN");
        this.isShow = "";
        // 通知登录侧边栏退出 暂时使用全局事件总线来解决响应式问题
        this.$bus.$emit("isLogin");
        // 判断是否在首页
        if (this.$route.path !== "/") {
          this.$router.push("/");
        }
        this.$message({
          type: "success",
          message: "已退出登录",
        });
      } catch (err) {
        this.$message(err.message);
      }
    },
    // 监听滚动事件的回调
    handleScroll(e) {
      // 判断 只要用户进行滚动，就将头部导航栏设成固定定位
      // e.path 预计在2023年1月弃用,
      if (e.composedPath()[1].scrollY > 60) {
        this.isfixed = true;
      } else {
        this.isfixed = false;
      }
    },
    // 跳转到search页面
    toSearch() {
      // 判断长度
      if (this.keyword.length > 15)
        return this.$message({
          type: "error",
          message: "搜索词超过最大值(15)",
        });
      if (this.keyword.trim().length === 0)
        return this.$message({
          type: "error",
          message: "搜索词不能为空",
        });
      // 判断用户是否已经在搜索页面
      if (this.$route.path === "/search") {
        // 就不应该跳转，直接去发送请求
        this.$bus.$emit("getdataBykeyword", this.keyword);
      } else {
        // 跳转
        this.$router.push({
          name: "/search",
          params: {
            keyword: this.keyword,
          },
        });
      }
    },
    // 跳转到我的页面的回调 需要传递一个isMine字段，表示是本人
    toMine() {
      this.$router.push({
        name: "/mine",
        params: { uuId: this.userinfo.uuId, isMine: true },
      });
    },
  },
  computed: {
    // vuex中的个人信息
    userinfo() {
      return this.$store.state.user.userinfo;
    },
  },
};
</script>

<style lang="less" scoped>
.headerNav {
  background: #fff;
  box-shadow: 0px 0px 5px #ccc;
  width: 100%;
  height: 52px;
  z-index: 99;
  .container {
    width: auto;
    max-width: 1156px;
    min-width: 1000px;
    margin: 0 auto;
    display: flex;
    .logo {
      color: inherit;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .page {
      display: flex;
      margin-left: 25px;
      margin-right: 15px;
      min-width: 288px;
      li {
        padding: 15px 14px;
        a {
          font-size: 16px;
          line-height: 22px;
          color: #8590a6;
          text-align: center;
        }
      }
      li:hover a {
        color: #008c8c;
      }
    }
    .serach {
      margin-left: 15px;
      max-width: 482px;
      height: 52px;
      line-height: 52px;
      input {
        min-width: 468px;
        height: 33px;
        border: none;
        border-radius: 20px;
        background: #cacbcc;
        color: #121212;
        text-align: 100px;
        outline: none;
        text-indent: 20px;
        overflow: hidden;
      }
      button {
        width: 80px;
        height: 34px;
        line-height: 34px;
        background: #008c8c;
        border: none;
        border-radius: 20px;
        text-align: center;
        padding: 0 10px;
        margin-left: -80px;
        cursor: pointer;
        a {
          color: white;
          font-weight: 700;
        }
      }
    }
    .info {
      min-width: 224px;
      padding-left: 30px;
      padding-right: 16px;
      display: flex;
      margin-left: 25px;
      margin-right: 15px;
      li {
        cursor: pointer;
        padding: 15px 14px;
        a {
          font-size: 16px;
          line-height: 22px;
          color: #8590a6;
          text-align: center;
        }
      }
      li:hover a {
        color: #008c8c;
      }
      .headimg {
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        background: #ccc;
        img {
          width: 30px;
          height: 30px;
          border-radius: 5px;
        }
      }
      i {
        font-size: 25px;
      }
      .headimg:hover {
        animation: turn 2s;
      }
    }
    .active {
      font-weight: 700;
      color: #008c8c !important;
    }
  }
}
.scroll {
  position: fixed;
  left: 0;
  animation: scroll 0.5s ease forwards;
}
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scroll {
  0% {
    top: -52px;
  }
  100% {
    top: 0;
  }
}
</style>